<script>
import { getAction } from '@api/manage'

export default {
  name: 'CargoCascader',
  props: {
    maxLevel: {
      type: Number,
      default: 3,
      validator: value => [2, 3].includes(value)
    },
    loadChildrenOnSelect: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      options: [],
      url: {
        list: '/wms/basic/cargo-team/listAll',
        listCargoGroupByMainId: '/wms/basic/cargo-team/listAllCargoGroupByMainId',
        listCargoGroupMemberByGroupMainId: '/wms/basic/cargo-team/listAllCargoGroupMemberByGroupMainId'
      }
    }
  },
  mounted() {
    this.fetchOptions()
  },
  methods: {
    fetchOptions() {
      getAction(this.url.list, {}).then((res) => {
        if (res.success) {
          this.options = res.result.map(item => {
            return {
              label: item.teamName,
              value: item.id,
              level: 1,
              isLeaf: false
            }
          })
        }
      })
    },
    loadData(selectedOptions) {
      const targetOption = selectedOptions[selectedOptions.length - 1]
      if (targetOption.level >= this.maxLevel) return
      targetOption.loading = true
      if (targetOption.level === 1) {
        getAction(this.url.listCargoGroupByMainId, {
          teamId: targetOption.value
        }).then((res) => {
          targetOption.loading = false
          if (res.success) {
            targetOption.children = res.result.map(item => {
              return {
                label: item.groupName,
                value: item.id,
                level: 2,
                isLeaf: this.maxLevel === 2
              }
            })
            if (targetOption.children.length === 0) {
              targetOption.isLeaf = true
              targetOption.children = null
            }
            this.options = [...this.options]
          }
        })
      } else if (targetOption.level === 2) {
        getAction(this.url.listCargoGroupMemberByGroupMainId, {
          groupId: targetOption.value
        }).then((res) => {
          targetOption.loading = false
          if (res.success) {
            targetOption.children = res.result.map(item => {
              return {
                label: item.memberName,
                value: item.id,
                level: 3,
                isLeaf: true
              }
            })
            if (targetOption.children.length === 0) {
              targetOption.isLeaf = true
              targetOption.children = null
            }
            this.options = [...this.options]
          }
        })
      }
    },
    async onChange(value) {
      if (this.loadChildrenOnSelect && this.maxLevel === 2) {
        const response = await getAction(this.url.listCargoGroupMemberByGroupMainId, {
          groupId: value[value.length - 1]
        })
        if (response.success) {
          response.result
          this.$emit('change', { value, list: response.result })
        }
        return
      }
      this.$emit('change', value)
    }
  }
}
</script>

<template>
  <a-cascader
    :options="options"
    :load-data="loadData"
    placeholder="请选择"
    change-on-select
    @change="onChange"
  />
</template>

<style scoped>

</style>